<template>
	<div class="weapon-account-container">
		<div class="weapon-account-item" v-for="(item, index) in props.accounts" :key="index">
			<div class="weapon-account-item-groups" v-for="(weapon, weaponIndex) in item.weapons" :key="weaponIndex">
				<div class="weapon-account-item-price">
					<img class="weapon-account-item-icon" src="@/static/img/battle/createBattle/icon_coin.png" />
					<span class="weapon-account-item-value">{{ item.balance }}</span>
				</div>
				<img class="weapon-account-item-img" :src="processImageUrl(weapon.img)" />

				<div class="weapon-account-item-title">{{ weapon.name }}</div>
				<div class="weapon-account-item-tag" :style="{ color: weapon.color }">{{ weapon.tag }}</div>
				<div class="weapon-account-item-desc">{{ weapon.desc }}</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from 'vue';
import { processImageUrl } from '@/utils';

export default defineComponent({
	setup(props, { emit }) {
		// 创建一个响应式状态对象
		const state = reactive({
			loading: false
		});

		onMounted(() => {});

		return {
			...toRefs(state),
			processImageUrl,
			props
		};
	},
	components: {},

	props: {
		accounts: {
			type: Array,
			default: () => []
		}
	}
});
</script>

<style scope lang="scss">
@import '@/views/battle/components/CreateBattle/WeaponContainer.scss';
</style>
